<template>
  <div class="app-container">
    <n-config-provider :theme="darkTheme">
      <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="24">
        <el-form :inline="true">
          <el-form-item label="时间：">
            <el-date-picker
              v-model="date_range"
              type="datetimerange"
              placeholder="查询日期"
              style="width: 320px"
              format="yyyy-MM-dd HH:mm"
              autocomplete="off"
              @change="get_info"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row> -->
      <n-radio-group
        v-model:value="curIndex"
        name="radiobuttongroup1"
        style="padding-left: 20px"
        @change="get_info"
      >
        <n-radio-button
          v-for="item in group"
          :key="item.name"
          :value="item.hours"
          :label="item.name"
        />
      </n-radio-group>
      <echart :options="option" style="width: 100%; height: 500px" />
      <n-data-table
        :columns="columns"
        :data="data"
        :pagination="true"
        :bordered="false"
        style="padding: 0px 5%; height: 350px"
        flex-height
      />
    </n-config-provider>
  </div>
</template>

<script>
import {
  NDataTable,
  NConfigProvider,
  darkTheme,
  NRadioGroup,
  NRadioButton,
} from "naive-ui";
export default {
  name: "Mmmeter",
  components: { NDataTable, NConfigProvider, NRadioGroup, NRadioButton },
  data() {
    return {
      now_data: {},
      darkTheme: darkTheme,
      loading: false,
      total: 21,
      queryParams: {
        pageNo: 1,
        pageSize: 9999,
        interval: 9,
        input_time_start: "",
      },
      type: "日",
      columns: [
        {
          title: "No",
          key: "id",
        },
        {
          title: "测量时间",
          key: "time",
        },
        {
          title: "测量值",
          key: "val",
        },
      ],
      group: [
        {
          name: "1小时",
          hours: 1,
        },
        {
          name: "6小时",
          hours: 6,
        },
        {
          name: "12小时",
          hours: 12,
        },
        {
          name: "1天",
          hours: 24,
        },
        {
          name: "2天",
          hours: 48,
        },
        {
          name: "7天",
          hours: 168,
        },
      ],
      curIndex: 1,
      data: [],
      option: {
        dataset: {
          dimensions: [{ name: "time", type: "time" }, "val"],
          source: [],
        },
        grid: [{ left: "5%", right: "5%", bottom: "80px" }],
        tooltip: {
          trigger: "axis",
          position: function (pt) {
            return [pt[0], "10%"];
          },
        },
        title: {
          left: "center",
          text: "电泳车间液位监测",
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            restore: {},
            saveAsImage: {},
          },
        },
        dataZoom: [
          {
            xAxisIndex: 0,
            type: "inside",
            start: 80,
            end: 100,
          },
          {
            xAxisIndex: 0,
            start: 80,
            end: 100,
          },
          {
            type: "slider",
            yAxisIndex: 0,
            filterMode: "none",
          },
          {
            type: "inside",
            yAxisIndex: 0,
            filterMode: "none",
          },
        ],
        xAxis: {
          type: "time",
          // formatter: "{yyyy}-{MM}-{dd} {HH}",
          // splitNumber: 12,
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "100%"],
          min: function (value) {
            return value.min > 100 ? 100 : 0;
          },
        },
        series: [
          {
            name: "测量值",
            type: "line",
            symbol: "none",
            sampling: "lttb",
            itemStyle: {
              color: "rgb(255, 70, 131)",
            },
            markPoint: {
              data: [
                {
                  name: "最小值",
                  type: "min",
                },
                {
                  name: "最大值",
                  type: "max",
                },
              ],
            },
            // data: data,
          },
        ],
      },
    };
  },
  methods: {
    get_info() {
      this.loading = true;
      this.queryParams.pageNo = 1;
      this.queryParams.input_time_start = this.$moment()
        .add(-this.curIndex, "hours")
        .format();
      this.queryParams.interval = this.curIndex;
      fetch(
        `/proxy_python/get_yewei_historical_data/?pageSize=9999&interval=${this.queryParams.interval}&input_time_start=${this.queryParams.input_time_start}`
      )
        .then((res) => {
          return res.json();
        })
        .then((res) => {
          this.data = res.data;
          this.option.dataset.source = this.data;
        });
    },
  },
  mounted() {
    this.get_info();
    setInterval(() => {
      this.get_info();
    }, 30000);
  },
};
</script>
<style lang="scss" scoped>
li {
  line-height: normal;
  padding: 7px;
  .name {
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .addr {
    font-size: 12px;
    color: #b4b4b4;
  }
  .highlighted .addr {
    color: #ddd;
  }
}
</style>
